<template>
  <div class="person-wrapper">
    <li v-for="(item, index) in noticeList" :key="index">
      <view class="notice-time">{{
        item.gmtCreate | formatDateAll(item.gmtCreate)
      }}</view>
      <view class="info-wrapper ph16 bgc-white br8 border">
        <view class="notice-top flex-center fs16 fh18 fw500 border-bottom tc-l1 pv16">
          {{ item.title }}
        </view>
        <view class="notice-mid pv16">
          <view class="info-item fh22 fs16">
            <p class="tc-l3">通知人：</p>
            <p class="tc-l1">{{ item.createUserName }}</p>
          </view>
          <view class="info-item fh22 fs16 mt12">
            <p class="tc-l3">内容：</p>
            <p class="tc-l1">{{ item.content }}</p>
          </view>
        </view>
        <view class="notice-btm flex-center-center" @click="confirmRead(item)">
          <span
            class="mr6"
            :class="
              !item.readEmpIds
                ? 'tc-theme'
                : item.readEmpIds.indexOf($store.state.site.employeeId) === -1
                  ? 'tc-theme'
                  : 'tc-l3'
            "
          >{{
            !item.readEmpIds
              ? "查看详情"
              : item.readEmpIds.indexOf($store.state.site.employeeId) === -1
                ? "查看详情"
                : "已阅读"
          }}</span>
          <i class="arrow iconfont" :class="
              !item.readEmpIds
                ? 'tc-theme'
                : item.readEmpIds.indexOf($store.state.site.employeeId) === -1
                  ? 'tc-theme'
                  : 'tc-l3'
            ">&#xe6bc;</i>
        </view>
      </view>
    </li>
    <view v-if='noticeList.length===0'>
        <view
        style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: cneter;"
      >
        <img
          style="width: 200px; height: 200px; margin: 0 auto;"
          src="../static/images/meiyou.png"
        />
        <view style="margin-top: 20px; color: #999; text-align: center;">暂无记录</view>
      </view>
    </view>
  </div>
</template>
<script>
import { listNoticeCurrentUser, readUserNotice } from "@/services/contract";
import { formatDateAll } from "@/utils/tools.js";
import { mapState } from "vuex";
export default {
  filters: {
    formatDateAll: formatDateAll
  },
  data() {
    return {
      readStatus: "我已阅读",
      noticeList: []
    };
  },
  computed: {
    ...mapState(["site"])
  },
  onShow() {
    this.listNoticeCurrentUser();
  },
  created() {
    this.listNoticeCurrentUser();
  },
  methods: {
    listNoticeCurrentUser() {
      listNoticeCurrentUser(
        this.site.companyId,
        uni.getStorageSync("employeeId")
      ).then(res => {
        this.noticeList = res;
        console.log("debug log --> ", res);
      });
    },
    confirmRead(item) {
      uni.navigateTo({
        url: "/notification/detail?id=" + item.id
      });

      console.log("debug log --> ", this.$store.state.site.employeeId);

      readUserNotice(item.id, this.$store.state.site.employeeId)
        .then(res => {
          this.listNoticeCurrentUser();
          // uni.navigateTo({
          //   url: "/notification/detail?id=" + item.id
          // })
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>
<style lang="scss">
.yellow {
  color: rgba(252, 175, 79, 1);
}
.gray {
  color: #d7d7d7;
}
</style>
